<template>
  <div id="cesium-container"></div>
</template>

<script>
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import collegePositions from '@/store/collegePosition.js'

export default {
  name: 'CesiumViewer',
  // 挂载后初始化 Cesium
  mounted () {
    this.initCesium()
  },
  // 组件销毁前清理资源
  beforeDestroy () {
    // 销毁Viewer
    if (this.viewer && !this.viewer.isDestroyed()) {
      this.viewer.destroy()
    }
  },
  methods: {
    // 初始化 Cesium 查看器
    initCesium () {
      // 设置Cesium静态资源路径
      window.CESIUM_BASE_URL = './'

      // 初始化地球
      const viewer = new Cesium.Viewer('cesium-container', {
        // 配置 Cesium 视图的初始设置，禁用不必要的工具栏和按钮以简化界面
        timeline: false, // 禁用时间轴控件
        animation: false, // 禁用动画控件
        baseLayerPicker: true, // 禁用基础图层选择器
        fullscreenButton: true, // 禁用全屏按钮
        vrButton: false, // 禁用VR按钮
        infoBox: false, // 禁用信息框
        sceneModePicker: false, // 禁用场景模式选择器
        navigationHelpButton: false, // 禁用导航帮助按钮
        geocoder: false // 禁用地理编码器
      })

      // 去除版权信息（开发环境）
      viewer.cesiumWidget.creditContainer.style.display = 'none'

      // 保存到组件实例
      this.viewer = viewer

      // 初始化PinBuilder
      const pinBuilder = new Cesium.PinBuilder()

      // 遍历collegePositions数据并添加到地图
      // 遍历每个区域键
      for (const areaKey in collegePositions) {
        // 获取当前区域的对象
        const area = collegePositions[areaKey]
        // 遍历区域内的每个学院键
        for (const collegeKey in area) {
          // 确定学院数据的格式并获取学院数组
          const colleges = Array.isArray(area) ? area : area[collegeKey]
          // 如果学院数据是一个数组，则遍历每个学院
          if (Array.isArray(colleges)) {
            colleges.forEach(college => {
              // 创建一个红色的学院图标
              const pin = pinBuilder.fromText('📍', Cesium.Color.RED, 48)
              // 在地图上添加学院实体
              viewer.entities.add({
                // 设置学院的位置
                position: Cesium.Cartesian3.fromDegrees(college.coordinates[0], college.coordinates[1]),
                // 设置图标的显示属性
                billboard: {
                  image: pin,
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                },
                // 设置标签的显示属性
                label: {
                  text: college.name,
                  font: '11pt monospace',
                  style: Cesium.LabelStyle.FILL,
                  outlineWidth: 2,
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  pixelOffset: new Cesium.Cartesian2(0, -15) // 调整标签位置
                }
              })
            })
          } else if (colleges && Array.isArray(colleges.colleges)) {
            // 如果学院数据包含嵌套的学院数组，则遍历这些学院
            colleges.colleges.forEach(college => {
              // 创建一个红色的学院图标
              const pin = pinBuilder.fromText('📍', Cesium.Color.RED, 48)
              // 在地图上添加学院实体
              viewer.entities.add({
                // 设置学院的位置
                position: Cesium.Cartesian3.fromDegrees(college.coordinates[0], college.coordinates[1]),
                // 设置图标的显示属性
                billboard: {
                  image: pin,
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                },
                // 设置标签的显示属性
                label: {
                  text: college.name,
                  font: '14pt monospace',
                  style: Cesium.LabelStyle.FILL,
                  outlineWidth: 2,
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  pixelOffset: new Cesium.Cartesian2(0, -15) // 调整标签位置
                }
              })
            })
          }
        }
      }

      // 视角飞向陕西地区
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(108.942, 34.264, 20000),
        duration: 4
      })
    }
  }
}
</script>

<style scoped>
#cesium-container {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
